<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ti-ket - Informations de paiement</title>
<!-- CSS - Initialisation des éléments html -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />

<link href="css/main.css" type="text/css" rel="stylesheet" />
<link href="css/paiement.css" type="text/css" rel="stylesheet" />

<!-- ****************     CSS et JS pour utiliser le jScrollPane     **************** -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>
<script type="text/javascript">
	$(function(){
		$('#content').jScrollPane();
	});
</script>
<!-- ************************************************************************************* -->
</head>

<body>
<div id="global">
	<!-- ****************     DEBUT EN-TÊTE     **************** -->
	<div id="header">
    		<div class="logo">Ti-Ket</div>
           <div class="search_wrapper">
           		<div class="label">Recherchez des spectacles </div>
                <form id="search_form" name="search_form" action="#">
                    <input type="text" name="search_input" class="search_input" id="search_input" value="Artiste, Spectacle, Catégorie" />
                    <input type="submit" name="search_btn" class="search_btn" id="search_btn" />
                </form>
            </div>
        <div class="categories">
        	<ul>
            	<li><a href="#">Musique</a></li>
                <li><a href="#">Sport</a></li>
                <li><a href="#">Humour</a></li>
                <li><a href="#">Famille</a></li>
                <li><a href="#">Salle</a></li>
                <li><a href="#">Calendrier</a></li>
            </ul>
        </div>
    </div>
	<!-- ****************     FIN EN-TÊTE     **************** -->
    
	<!-- ****************     DEBUT CORP DE PAGE     **************** -->
    <div id="body">
    	
        <div id="content">
        	<div id="paiement_nav">
                <ul>
                    <li class="selected"><a href="#">Informations</a></li>
                    <li><a href="#">Confirmation</a></li>
                    <li><a href="#">Paiement</a></li>
                </ul>
            </div>
        	<div id="pmt_info">
                <div class="pmt_info_form_wrapper">                
                    <form action="#" name="pmt_info_form">
                    <div class="col_info">
                    	<h1>Informations de paiement</h1>
                    	<div class="label">Prénom:</div>
                    	<div class="field"><input name="firstName" type="text" size="50" /></div>
                  		
                        <div class="label">Nom:</div>
                    	<div class="field"><input name="lastName" type="text" size="50" /></div>
                  		
                        <div class="label">Adresse:</div>
                    	<div class="field"><input name="address1" type="text" value="" size="50" /></div>
                  		
                        <div class="label">Ville:</div>
                    	<div class="field"><input name="city" type="text" value="" size="50" /></div>
                  		
                        <div class="label">Province:</div>
                    	<div class="field"><input name="state" type="text" value="" size="50" /></div>
                  		
                        <div class="label">Postal Code:</div>
                    	<div class="field"><input name="zip" type="text" value="" size="50" /></div>
                  		
                        <div class="label">Pays:</div>
                    	<div class="field"><input name="country" type="text" value="" size="50" /></div>
                  		
                        <div class="label">Téléphone:</div>
                    	<div class="field"><input name="phone" type="text" value="" size="50" /></div>
                     </div>
                     <div class="col_cc">
                         <h1>Information Carte de crédit</h1>
                        <div class="label">Numéro Carte de Crédit:</div>
                        <div class="field"><input name="CCNo" type="text" value="" size="19" maxlength="40" /></div>
                        
                        <div class="label">Date d'expiration:</div>
                        <div class="field">
                        <select name="CCExpiresMonth">
                              <option value="" selected="selected">--Mois-- </option>
                              <option value="01">January (01) </option>
                              <option value="02">February (02) </option>
                              <option value="03">March (03) </option>
                              <option value="04">April (04) </option>
                              <option value="05">May (05) </option>
                              <option value="06">June (06) </option>
                              <option value="07">July (07) </option>
                              <option value="08">August (08) </option>
                              <option value="09">September (09) </option>
                              <option value="10">October (10) </option>
                              <option value="11">November (11) </option>
                              <option value="12">December (12) </option>
                          </select>
                              / 
                              <select name="CCExpiresYear">
                                <option value="" selected="selected">--Année-- </option>
                                <option value="04">2004 </option>
                                <option value="05">2005 </option>
                                <option value="06">2006 </option>
                                <option value="07">2007 </option>
                                <option value="08">2008 </option>
                                <option value="09">2009 </option>
                                <option value="10">2010 </option>
                                <option value="11">2011 </option>
                                <option value="12">2012 </option>
                                <option value="13">2013 </option>
                                <option value="14">2014 </option>
                                <option value="15">2015 </option>
                            </select>
                        </div>
                      
               		  <div class="continuer_btn">CONTINUER</div>
                      </div>
                  </form>
                </div>
            </div>
        </div>
    </div>
	<!-- ****************     FIN CORP DE PAGE     **************** -->
    
	<!-- ****************     DEBUT PIED DE PAGE    **************** -->
    <div id="footer">&nbsp;</div>    
	<!-- ****************     FIN PIED DE PAGE     **************** -->
</div>
</body>
</html>
